<template>
    <el-submenu v-if="item.children && item.children.length > 1" :index="item.path">
        <template slot="title">
            <i :class="item.meta.icon"></i>
            <span>{{ item.meta.name }}</span>
        </template>
        <MenuTree :item="child" v-for="child in item.children" :key="child.name" />
    </el-submenu>
    <el-menu-item v-else-if="item.children && item.children.length === 1" :index="item.path">
        <i :class="item.children[0].meta.icon"></i>
        <span slot="title">{{ item.children[0].meta.name }}</span>
    </el-menu-item>
    <el-menu-item v-else :index="item.path">
        <i :class="item.meta.icon"></i>
        <span slot="title">{{ item.meta.name }}</span>
    </el-menu-item>
</template>

<script>
export default {
    name: "MenuTree",
    props: {
        item: {
            type: Object,
            required: true,
            default: () => ({}),
        }
    },
};
</script>

<style lang="less" scoped>
i.fa {
    margin-right: 1em;
}
</style>
